<template id="ProductDetail">
  <div class="productDetail" ref="productDetail">
    <go-to-back :path="`/mail/productItem`" />
    <div class="detailContent">
      <div class="leftPath">
        <div class="leftTop">
          <div class="pcProductImg">
            <img class="productImg" :src="productData.image" />
          </div>
          <div class="phoneProductBg">
            <img class="phoneProductImg" :src="productData.image" />
            <img class="phoneProductBg" :src="phoneProductBg" />
            <div class="phoneOptions">
              <div class="phoneback">
                <img :src="phoneBackIcon" @click="$router.push('productItem')" />
              </div>
              <div class="phoneBadge">
                <van-badge :content="productData.fabulous" max="99">
                  <div class="phoneFabulous" @click="getFabulous">
                    <img :src="phoneFabulousIcon" v-if="productData.isFabulous" />
                    <img :src="phoneNoFabulousIcon" v-else />
                  </div>
                </van-badge>
                <van-badge :content="productData.collect" max="99">
                  <div class="phoneCollection" @click="getCollect">
                    <img :src="phoneCollectionIcon" v-if="productData.isCollect" />
                    <img :src="phoneNoCollectionIcon" v-else />
                  </div>
                </van-badge>
              </div>
            </div>
            <div
              class="phoneOptionPop"
              :class="[{ slideTop: productData.isFabulous && !fabulousInit }]"
            >
              <div class="phonePopContnet">点赞成功</div>
            </div>
            <div
              class="phoneOptionPop"
              :class="[{ slideTop: productData.isCollect && !collectInit }]"
            >
              <div class="phonePopContnet">收藏成功</div>
            </div>
          </div>
          <div class="imageRight">
            <p class="pcTitle">{{ productData.goods_name }}</p>
            <div class="user">
              <div class="fabulous">
                <img :src="fabulousIcon" @click="getFabulous" v-if="productData.isFabulous" />
                <img :src="noFabulousIcon" @click="getFabulous" v-else />
                <p class="userDesc">
                  点赞<span :class="{ isCollectText: productData.isFabulous }"
                    >{{ productData.fabulous }}个赞</span
                  >
                </p>
              </div>
              <div class="splitLine"></div>
              <div class="collection">
                <img :src="collectionIcon" @click="getCollect" v-if="productData.isCollect" />
                <img :src="noCollectionIcon" @click="getCollect" v-else />
                <p class="userDesc">
                  收藏<span :class="{ isCollectText: productData.isCollect }"
                    >{{ productData.collect }}人气</span
                  >
                </p>
              </div>
            </div>

            <div
              class="beginTime"
              v-if="productData.is_buy === 0 && !productData.isOverTime && is_one_buy == 0 && status == 1"
            >
              <p>{{ sellTime }}</p>
            </div>
            <div class="beginTime" v-else-if="productData.sale_type == 3 && is_one_buy == 0">
              时间待定
            </div>

            <div class="box">
              <img :src="boxBg" class="boxBg" />
              <p class="priceTitle">当前价格</p>
              <p class="price">
                <span>¥</span>{{ is_gold_selected? '0.01' : productData.price }}
                <del class="oldPrice">
                  <span class="delContent">原价 {{  productData.og_price }}</span></del
                >

                <div class="isGoldSelected" @click="changeGoldSelect" v-show="productData.is_gold == 1 && status == 9">
                  <label>
                    <img v-if="is_gold_selected" src="@/assets/images/pc_black/auth/select_yes.png" />
                    <img v-else src="@/assets/images/pc_black/auth/select_not.png" />
                    <span>是否使用任选购权益</span>
                  </label>
                </div>
              </p>
              <div class="boxBottom">
                <md-button
                  class="buyButton"
                  v-if="is_one_buy == 1"
                  :class="{
                    unBuy: !canBuy || !productData.goods_stock || productData.is_buy == 2
                  }"
                  @click="buyOne"
                >
                  <!-- :disabled="!canBuy || !productData.goods_stock" -->
                  <span v-if="productData.goods_stock && productData.is_buy == 1">一元购买</span>
                  <span v-else-if="productData.is_buy == 2">该藏品一元购资格已使用</span>
                  <span v-else-if="!productData.goods_stock">已售罄</span>
                  <span v-else>
                    邀请好友一元购买
                  </span>
                </md-button>
                <md-button
                  v-else
                  class="buyButton"
                  :class="{
                    unBuy:
                      productData.goods_stock == 0 ||
                      productData.isOverTime ||
                      (productData.is_gold == 1 && !is_gold_selected && status == 9 && productData.is_buy == 0)
                  }"
                  @click="buyProduct"
                >
                  <span>{{ buyBtnShow }}</span>
                </md-button>
                <p>
                  库存数量 <span>{{ productData.goods_stock }}</span>
                </p>
              </div>
            </div>
            <div class="authentication">
              <div class="onLine">
                <img :src="onLineIcon" />
                <p>该商品已上链</p>
              </div>
              <div class="spiltLine"></div>
              <div class="appraisal">
                <img :src="appraisalIcon" />
                <p>该商品已鉴定</p>
              </div>
            </div>
          </div>
          <div class="phoneDesc">
            <div
              class="sellDay"
              v-if="productData.is_buy === 0 && !productData.isOverTime && is_one_buy == 0 && status == 1"
            >
              {{ buttonName }}
            </div>
            <div class="sellDay" v-else-if="productData.sale_type == 3 && is_one_buy == 0">
              时间待定
            </div>

            <div class="phoneProductInfo">
              <img :src="phoneProductInfoBg" class="phoneProductInfoBg" />
              <p class="phoneProductTitle">{{ productData.goods_name }}</p>
              <div class="defaultPath">
                <div class="defaultContent">
                  <img :src="productData.icon" class="defaultHeadIcon" />
                  <p class="defaultName">{{ productData.authorize }}</p>
                </div>
                <p class="productStock">
                  库存数量 <span>{{ productData.goods_stock }}</span>
                </p>
              </div>
              <div class="phoneLinks">
                <div class="onLine">
                  <img :src="phoneOnLineIcon" />
                  <p>该商品已上链</p>
                </div>
                <div class="appraisal">
                  <img :src="phoneAppraisalIcon" />
                  <p>该商品已鉴定</p>
                </div>
              </div>
            </div>
            <div class="phoneHelp" v-if="is_one_buy && is_new_user == 0">
              <img class="phoneHelpFinish" :src="pcHelpFinish" v-if="helpPercent == totalPercent" />
              <div class="phoneHelpTop">
                <img :src="pcHelpTitle" class="phoneHelpTitle" />
                <p>邀请好友完成任务获得一元购买资格</p>
              </div>
              <div class="phoneHelpBottom">
                <div
                  class="phoneHelpProcess"
                  :class="{ finishMargin: helpPercent == totalPercent }"
                >
                  <div class="phoneHelpCurrent" :style="{ width: getHelpWidth(helpPercent) }"></div>
                </div>
                <p>
                  <span>{{ helpPercent }}</span
                  >/{{ totalPercent }}<span v-if="helpPercent == totalPercent"> (完成)</span>
                </p>
              </div>
            </div>
            <div class="phoneProductDesc">
              <p class="phoneProductDescTitle">商品描述</p>
              <div class="phoneProductDescContent">
                <p
                  :class="{ isShowAll: !isShowPhoneProduct }"
                  class="goodsDescPhone"
                  v-html="productData.goods_desc"
                ></p>
                <p class="openDesc" @click="openDesc" v-if="isShowPhone">
                  {{ openDescName }}
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="pcHelp" v-if="is_one_buy && is_new_user == 0">
          <img class="pcHelpLeft" :src="pcHelpLeft" />
          <img class="pcHelpFinish" :src="pcHelpFinish" v-if="helpPercent == totalPercent" />
          <div class="pcHelpTop">
            <img class="pcHelpTitle" :src="pcHelpTitle" />
            <p>邀请好友完成任务获得一元购买资格</p>
          </div>
          <div class="pcHelpBottom">
            <div class="pcHelpProcess" :class="{ finishMargin: helpPercent == totalPercent }">
              <div class="pcHelpCurrent" :style="{ width: getHelpWidth(helpPercent) }"></div>
            </div>
            <p>
              <span>{{ helpPercent }}</span
              >/{{ totalPercent }}<span v-if="helpPercent == totalPercent"> (好友助力完成)</span>
            </p>
          </div>
        </div>
        <div class="leftCenter">
          <p class="centerTitle">商品描述</p>
          <div class="defaultInfo">
            <img :src="productData.icon" class="defaultIcon" />
            <p class="defaultName">{{ productData.authorize }}</p>
          </div>
          <div class="centerBox">
            <p
              :class="{ isShowAll: !isShowPcInfo }"
              class="goodsDesc"
              v-html="productData.goods_desc"
              id="goodsDesc"
            ></p>
            <p class="showPcInfo" @click="showPcAll" v-if="isShowPc">
              {{ showPcInfo }}
            </p>
          </div>
        </div>

        <div class="chainRecord">
          <div class="chainTitleImg">
            <img src="@/assets/images/icons/only_big.png" />
            <img src="@/assets/images/icons/forever_big.png" />
            <img src="@/assets/images/icons/dont_big.png" />
          </div>
        </div>
        <div class="instructions">
          <p class="instructionsTitle">购买须知</p>
          <div class="instructionsBox">
            <p>{{ instructions }}</p>
          </div>
        </div>
      </div>
      <div class="rightPath">
        <div class="relevantTitle">
          <div class="splitLine"></div>
          <p>相关展品</p>
          <div class="splitLine"></div>
        </div>
        <div class="relevantBox">
          <template v-for="(item, index) in relevantList">
            <div :key="index" class="relevantItem" v-if="item.image" @click="goToDetail(item)">
              <img :src="item.image" />
              <div class="relevantDesc">
                <p class="relevantTitle">{{ item.goods_name }}</p>
                <div class="buy">
                  <p class="price"><span>¥</span>{{ item.price }}</p>
                  <div class="phoneProductNumber">商品剩余{{ item.goods_stock }}</div>
                </div>
              </div>
            </div>
          </template>
          <template v-for="(item, location) in relevantList">
            <div
              class="phoneItem"
              :key="location + 'phone'"
              v-if="item.image"
              @click="goToDetail(item)"
            >
              <div class="productImages">
                <img :src="item.image" />
              </div>
              <div class="productDesc">
                <p class="productTitle">{{ item.goods_name }}</p>
                <div class="buy">
                  <p class="price"><span>¥</span>{{ item.price }}</p>
                  <div class="phoneProductNumber">商品剩余{{ item.goods_stock }}</div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>

    <div class="phoneBottom">
      <div class="bottomContent">
        <p class="price">
          <span>¥</span>{{ is_gold_selected? '0.01' : productData.price }}
          <del class="m_oldPrice"
            ><span class="delContent">原价 {{ productData.og_price }}</span></del
          >
        </p>
        <md-button
          class="buyButton"
          v-if="is_one_buy == 1"
          :class="{
            selloutButton: !canBuy || !productData.goods_stock || productData.is_buy == 2
          }"
          @click="buyOne"
        >
          <!-- :disabled="!canBuy || !productData.goods_stock" -->
          <span v-if="productData.goods_stock && productData.is_buy == 1">一元购买</span>
          <span v-else-if="productData.is_buy == 2">该藏品一元购资格已使用</span>
          <span v-else-if="!productData.goods_stock">已售罄</span>
          <span v-else>
            邀请好友一元购买
          </span>
        </md-button>

        <md-button
          class="buyButton"
          v-else
          :class="{
            selloutButton:
              productData.goods_stock === 0 ||
              productData.isOverTime ||
              (productData.is_gold == 1 && !is_gold_selected && status == 9 && productData.is_buy == 0)
          }"
          @click="buyProduct"
        >
          <!-- <span
            v-if="
              productData.goods_stock !== 0 && !productData.isOverTime && productData.is_buy === 1
            "
            >立即购买</span
          >
          <span v-else-if="productData.goods_stock === 0">已售罄</span>
          <span v-else-if="productData.isOverTime">
            已结束
          </span>
          <span v-else>预约提醒</span> -->
          <span>{{ buyBtnShow }}</span>
        </md-button>

        <div class="isGoldSelected" @click="changeGoldSelect" v-show="productData.is_gold == 1 && status == 9" >
          <img v-if="is_gold_selected" src="@/assets/images/pc_black/auth/select_yes.png" />
          <img v-else src="@/assets/images/pc_black/auth/select_not.png" />
          <span>是否使用任选购权益</span>
        </div>
      </div>
    </div>

    <van-popup class="phonePop" v-model="showPopUp" position="bottom">
      <div class="phoneContent">
        <img :src="closeIcon" @click="showPopUp = false" class="closeIcon" />

        <div class="phoneContentInfo">
          <p class="phoneTitle">购买信息<span>购买数字藏品后，均不支持退换！</span></p>
          <div class="phoneProductInfo">
            <img :src="productData.image" class="smallImage" />
            <div class="phoneInfoRigth">
              <p class="phoneProductName">{{ productData.goods_name }}</p>
              <p class="phoneOrderId">订单号：{{ order_sn }}</p>
              <p class="phonePrice"><span>¥</span>{{ disPrice(productData.price) }}</p>
            </div>
          </div>
        </div>

        <div class="discount-title">
          <span>选择代金券</span>
          <span @click="gotoDiscount">如已获得代金券，请点击此处兑换后即可使用。</span>
        </div>

        <div class="discount">
          <discount-bar
            v-if="discountData.length > 0"
            :discountData="discountData"
            @handlePickDiscountCard="handlePickDiscountCard"
          >
          </discount-bar>
          <div class="discount-none" v-else>
            暂无可用代金券
          </div>
        </div>

        <div class="phonePay">
          <p class="phonePayTitle">选择付款方式</p>
          <div class="phonePayMode">
            <!-- <div class="phoneWxPay">
              <img :src="wxPayIcon" class="phonePayIcon" />
              <p class="phonePayType">首信易支付</p>
              <img
                class="selectIcon"
                :src="paySelect == 1 ? selectIcon : unSelectIcon"
                @click="paySelect = 1"
              />
            </div> -->

            <div class="phoneAliPay">
              <img :src="aliPayIcon" class="phonePayIcon" />
              <p class="phonePayType">支付宝支付</p>
              <img
                class="selectIcon"
                :src="paySelect == 2 ? selectIcon : unSelectIcon"
                @click="paySelect = 2"
              />
            </div>
            <div class="phoneLianPay">
              <img :src="lianlianPayIcon" class="lianlianPayIcon" />
              <p class="phonePayType">连连支付</p>
              <img
                class="selectIcon"
                :src="paySelect == 1 ? selectIcon : unSelectIcon"
                @click="paySelect = 1"
              />
            </div>
          </div>
        </div>
      </div>

      <div class="phonePayBottom">
        <div class="bottomContent">
          <p class="price"><span>¥</span> {{ popProductData.price == '0.01' ? disPrice(popProductData.price): disPrice(productData.price)}}</p>
          <md-button class="buyButton" @click="buyNow(productData)">
            立即支付
          </md-button>
        </div>
      </div>
    </van-popup>

    <van-popup class="phoneInvite" v-model="isShowPhoneInvite" position="bottom">
      <img :src="closeIcon" @click="isShowPhoneInvite = false" class="closeIcon" />
      <p class="inviteTitle">快来助力藏家</p>
      <img :src="defaultHeadIcon" class="defaultHeadIcon" />
      <p class="inviteDefaultName">METAUP</p>
      <p class="inviteDesc">助力藏家获得提前购买资格</p>
      <div class="inviteInfo">
        <div class="inviteInfoLeft">
          <p class="inviteInfoTitle">METAUP数字藏品</p>
          <p class="inviteInfoDesc">扫码进入metaup，探索有趣的数字平台</p>
        </div>
        <div class="InviteCode">
          <vue-qr :text="baseURL" :size="200"></vue-qr>
        </div>
      </div>
      <div class="inviteLink">
        <div class="inviteLinkItem" v-for="(item, index) in inviteLinkList" :key="index">
          <div class="inviteLinkImage">
            <img :src="item.image" />
          </div>
          <p>{{ item.name }}</p>
        </div>
      </div>
      <div class="inviteCancel">
        <div class="inviteCancelBtn">取消</div>
      </div>
    </van-popup>

    <cant-buy-dialog
      :isShowCantBuyDialog="isShowCantBuyDialog"
      :ewmUrls="ewmUrls"
      :productData="productData"
      :status="status"
      @handleCloseCantBuyDialog="closeCantBuyDialog"
    ></cant-buy-dialog>

    <buy-notes :options="buyNotesShow" @cancelNotes="closeBuyNotes" @continueBuy="continueBuy">
    </buy-notes>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import DiscountBar from "./components/DiscountBar.vue";
import GoToBack from "./components/GoToBack.vue";
import CantBuyDialog from "./components/CantBuyDialog.vue";
import {
  getGoodsInfoApi,
  doLikesApi,
  resetLikesApi,
  doCollectApi,
  resetCollectApi,
  getSimilarGoodsListApi,
  createOrderApi,
  createOneOrderApi,
  payOrderApi,
  UnifiedWxJSApiOrderApi,
  unifiedOrderApi,
  cashierPayApi,
  wxOAuthApi,
  bankcardInfoApi,
  getAvailableCouponApi,
  paySuccessCodeApi,
  unifiedAplipayOrderApi
} from "@/api";
import { Message } from "element-ui";
import { Toast } from "vant";
import { iscode, getWidth, escapeHTML, isIOS } from "@/utils";
import { initAPIs } from "@/utils/weixinSDK.js";
import vueQr from "vue-qr";
import BuyNotes from "./components/BuyNotes.vue";
import baseUrlApi from "@/utils/baseUrl.js";
import { mapState, mapMutations } from "vuex";
export default {
  name: "ProductDetail.vue",
  components: { GoToBack, vueQr, DiscountBar, CantBuyDialog, BuyNotes },
  // 定义属性
  data() {
    return {
      buyNotesShow: false,
      canBuy: true,
      card_count: 0,
      baseURL: "",
      helpPercent: 0,
      totalPercent: 5,
      pcHelpFinish: require("@/assets/images/product/pcHelpFinish.png"),
      pcHelpLeft: require("@/assets/images/product/pcHelpLeft.png"),
      pcHelpTitle: require("@/assets/images/product/pcHelpTitle.png"),
      paySelect: 2, // 1连连，2支付宝支付
      selectIcon: require("@/assets/images/mobile/select.png"),
      unSelectIcon: require("@/assets/images/mobile/unSelect.png"),
      order_sn: "",
      order_id: "",
      wxPayIcon: require("@/assets/images/mobile/wxPayIcon.png"),
      aliPayIcon: require("@/assets/images/mobile/aliPayIcon.png"),
      lianlianPayIcon: require("@/assets/images/mobile/lianlianPayIcon.png"),
      closeIcon: require("@/assets/images/mobile/closeIcon.png"),
      showPopUp: false,
      isShowPhoneInvite: false,
      defaultIcon: require("@/assets/images/mail/defaultIcon.png"),
      noFabulousIcon: require("@/assets/images/product/noFabulousIcon.png"),
      phoneNoFabulousIcon: require("@/assets/images/mobile/noFabulousIcon.png"),
      fabulousIcon: require("@/assets/images/product/fabulous.png"),
      phoneFabulousIcon: require("@/assets/images/mobile/fabulous.png"),
      collectionIcon: require("@/assets/images/product/collection.png"),
      phoneCollectionIcon: require("@/assets/images/mobile/collection.png"),
      noCollectionIcon: require("@/assets/images/product/noCollectionIcon.png"),
      phoneNoCollectionIcon: require("@/assets/images/mobile/noCollectionIcon.png"),
      phoneBackIcon: require("@/assets/images/mobile/phoneBack.png"),
      onLineIcon: require("@/assets/images/product/onLine.png"),
      appraisalIcon: require("@/assets/images/product/appraisal.png"),
      phoneOnLineIcon: require("@/assets/images/product/phoneOnLine.png"),
      phoneAppraisalIcon: require("@/assets/images/product/phoneAppraisal.png"),
      phoneProductBg: require("@/assets/images/mobile/productBg.png"),
      defaultHeadIcon: require("@/assets/images/mobile/defaultHeadIcon.png"),
      phoneProductInfoBg: require("@/assets/images/mobile/phoneProductInfoBg.png"),
      boxBg: require("@/assets/images/product/boxBg.png"),
      instructions:
        "本商品仅限年满18周岁且实名认证的中国大陆用户购买。METAUP数藏平台中的数字藏品是虚拟商品，并非实物，由于数字藏品的特殊性，一经购买成功，均不支持退换！数字藏品的知识产权或相关权益属于发行方或权利人所有，除另行取得发行方或权利人授权外，您不得将数字藏品用于任何商业用途。官方反对对数字藏品进行炒作、场外交易或任何非法方式的使用，由于您的任何上述行为造成的任何问题，均与METAUP无关！",
      productData: {},
      day: "",
      hour: "",
      minute: "",
      second: "",
      buttonName: "立即购买",
      relevantList: [],
      isIos: false,
      platform: 1, //  "platform":1PC 2手机
      hashWidth: "",
      timeWidth: "",
      copySize: "",
      isShowPhoneProduct: false,
      openDescName: "展开",
      isShowPcInfo: false,
      isShowPc: false,
      showPcInfo: "收起",
      backUpDesc: "",
      isShowPhone: false,
      collectInit: true,
      fabulousInit: true,
      sellTime: "",
      inviteLinkList: [
        {
          id: 1,
          name: "微信好友",
          image: require("@/assets/images/product/phoneWx.png")
        },
        {
          id: 2,
          name: "微信朋友圈",
          image: require("@/assets/images/product/phonePyq.png")
        },
        {
          id: 3,
          name: "QQ",
          image: require("@/assets/images/product/phoneQQ.png")
        },
        {
          id: 4,
          name: "复制链接",
          image: require("@/assets/images/product/phoneLink.png")
        }
      ],
      // 代金券数据
      discountData: [],
      // 当前选择的代金券索引下标(默认0，代表第一个)
      currentPickIndex: 0,
      // 是否显示cantBuyDialog
      isShowCantBuyDialog: false,
      // 二维码
      ewmUrls: [],
      status: 9,
      is_new_user: 0, //是否是新用户
      is_one_buy: 0, //是否是1元购,
      is_gold_selected: false,
      popProductData: {}
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    ...mapState(["wxCode", "isShowBuyTips", "equipment"]),
    buyBtnShow() {
      let show = "立即购买";

      if (this.productData.goods_stock === 0) {
        show = "已售罄";
      } else if (this.productData.isOverTime) {
        show = "已结束";
      } else {
        if (this.productData.is_buy == 0) {
          if (this.productData.is_gold == 1 && this.status == 9) {
            show = "立即购买";
          } else {
            show = "预约提醒";
          }
        } else {
          show = "立即购买";
        }
      }

      return show;
    }
  },
  // 监控data中的数据变化
  watch: {
    $route: {
      handler() {
        this.getGoodsInfo();
      },
      deep: true
    }
    // buyNotesShow: {
    //   handler(newValue, oldValue) {
    //     alert(newValue)
    //   },
    //   deep: true,
    // },
  },
  // 方法集合
  methods: {
    ...mapMutations(["setCouponId"]),
    // ------ async ------
    // 获取二维码
    async paySuccessCode() {
      let res = await paySuccessCodeApi();
      if (iscode(res)) {
        this.ewmUrls = res.result.list;
        this.ewmUrls.map(item => {
          this.$set(item, "image", res.result.show_url + item.icon);
        });
      }
    },
    // 微信
    async wxOAuth() {
      let res = await wxOAuthApi({
        code: this.wxCode
      });
      if (iscode(res)) {
      }
    },

    // 立即支付
    async buyNow(item) {
      // 使用连连支付
      if (this.paySelect == 1) {
        this.bankcardInfo();
      } else if (this.paySelect == 2) {
        this.useAlipay();
      }
      // if (isWeixin()) {
      //   let result = await UnifiedWxJSApiOrderApi({
      //     order_sn: this.order_sn,
      //   });
      //   if (result.code === 0) {
      //     initAPIs(result, item.id, this.order_id);
      //   } else if (result.code === 300001) {
      //     this.wxOAuth();
      //   } else {
      //     Toast(result.message);
      //   }
      // } else {
      //   let result = await unifiedOrderApi({
      //     order_sn: this.order_sn,
      //     pay_type: 2, //2wx固定
      //     platform: 2, //2手机固定
      //   });
      //   if (iscode(result)) {
      //     window.location.href = result.result.code_url;
      //   }
      // }
    },

    async useAlipay() {
      // let alipayBaseURL = "";
      // if (this.discountData[this.currentPickIndex]?.id ?? "") {
      //   alipayBaseURL =
      //     baseUrlApi.productionApi +
      //     "/api/pay/unifiedOrder/" +
      //     this.order_sn +
      //     "/" +
      //     this.platform +
      //     "/" +
      //     this.discountData[this.currentPickIndex].id;
      // } else {
      //   alipayBaseURL =
      //     baseUrlApi.productionApi +
      //     "/api/pay/unifiedOrder/" +
      //     this.order_sn +
      //     "/" +
      //     this.platform;
      // }
      // window.location.href = alipayBaseURL;
      let res = await unifiedAplipayOrderApi({
        order_sn: this.order_sn,
        platform: this.platform,
        coupon_id: this.discountData[this.currentPickIndex]?.id ?? ""
      });
      if (iscode(res)) {
        const divForm = document.getElementsByTagName("alidiv");
        if (divForm.length) {
          document.body.removeChild(divForm[0]);
        }
        const div = document.createElement("div");
        div.innerHTML = res.result; // data就是接口返回的form 表单字符串
        document.body.appendChild(div);
        // document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
        document.forms[0].submit();
        document.body.removeChild(div);
      }
    },
    // 获取银行卡信息
    async bankcardInfo() {
      let res = await bankcardInfoApi();
      if (iscode(res)) {
        this.card_count = res.result.list.length;
        this.setCouponId(this.discountData[this.currentPickIndex]?.id ?? "");
        if (this.card_count <= 0) {
          this.$router.push({
            path: "/mail/bindCard",
            query: {
              order_sn: this.order_sn
            }
          });
        } else {
          this.$router.push({
            path: "/mail/selectCard",
            query: {
              order_sn: this.order_sn
            }
          });
        }
      }
    },
    // 获取商品详情
    async getGoodsInfo() {
      let result = await getGoodsInfoApi({
        id: this.$route.query.id
      });
      if (iscode(result)) {
        this.productData = result.result.goods_info;
        this.is_new_user = result.result.is_new_user;
        this.is_one_buy = result.result.is_one_buy;
        this.helpPercent = result.result.invite_num;
        this.totalPercent = result.result.total_invite_num;
        this.countTime(result, this.productData);
        this.productData.order_record = result.result.order_record;
        this.backUpDesc = this.productData.goods_desc;
        this.$set(this.productData, "icon", result.result.show_url + result.result.goods_info.icon);
        if (this.productData.goods_desc.indexOf("<img") !== -1) {
          this.isShowPc = false;
          this.isShowPhone = false;
        } else {
          if (this.platform == 2) {
            if (escapeHTML(this.productData.goods_desc).length >= 65) {
              this.isShowPhone = true;
              this.isShowPhoneProduct = true;
            } else {
              this.isShowPhone = false;
            }
          } else if (this.platform == 1) {
            if (escapeHTML(this.productData.goods_desc).length >= 180) {
              this.isShowPc = true;
              this.isShowPcInfo = true;
              this.showPcInfo = "展开";
            } else {
              this.isShowPc = false;
            }
          }
        }

        this.$set(
          this.productData,
          "image",
          result.result.show_url + result.result.goods_info.images[0]
        );
        this.$set(this.productData, "isFabulous", result.result.is_likes);
        this.$set(this.productData, "fabulous", result.result.goods_likes_cnt);
        this.$set(this.productData, "isCollect", result.result.is_collect);
        this.$set(this.productData, "collect", result.result.goods_collect_cnt);
        this.$set(this.productData, "nowTime", result.result.now_time);
        let time, date, month, day;
        if (this.productData.pre_start_time) {
          date = this.productData.pre_start_time.split(" ")[0].split("-");
          month = date[1] + "月";
          day = date[2] + "日";
          time = month + day + this.productData.pre_start_time.split(" ")[1].substr(0, 5);
          this.sellTime = time + "开售";
          this.overTime(result);
        }
        if (this.productData.sale_type == 1) {
          if (this.productData.goods_stock) {
            this.buttonName = "立即购买";
          } else {
            this.buttonName = "已售罄";
          }
        } else if (this.productData.sale_type == 2) {
          this.buttonName = time + "开售";
        } else {
          this.buttonName = "已结束";
        }

        if (this.productData.goods_stock == 0) {
          this.status = 0;
        }
      }
    },
    async payOrder() {
      let res = await payOrderApi({ order_sn: this.order_sn });
      if (iscode(res)) {
        this.productData = res.result.order;
        this.popProductData = res.result.order
        this.backUpDesc = this.productData.goods_desc
          ? escapeHTML(this.productData.goods_desc)
          : undefined;
        this.$set(this.productData, "image", res.result.show_url + this.productData.images[0]);
        if (this.productData.goods_desc) {
          if (this.productData.goods_desc.indexOf("<img") !== -1) {
            this.isShowPc = false;
            this.isShowPhone = false;
          } else {
            if (this.platform == 2) {
              if (escapeHTML(this.productData.goods_desc).length >= 65) {
                this.isShowPhone = true;
                this.isShowPhoneProduct = true;
              } else {
                this.isShowPhone = false;
              }
            } else if (this.platform == 1) {
              if (escapeHTML(this.productData.goods_desc).length >= 180) {
                this.isShowPc = true;
                this.isShowPcInfo = true;
                this.showPcInfo = "展开";
              } else {
                this.isShowPc = false;
              }
            }
          }
        }

        // 支付金额
        this.order_price = res.result.order.price;
      }
    },
    // 获取相关商品列表
    async getSimilarGoodsList() {
      let result = await getSimilarGoodsListApi({
        goods_cate_id: this.productData.goods_cate_id,
        goods_album_id: this.productData.goods_album_id
      });
      if (iscode(result)) {
        this.relevantList = result.result.list;
        this.relevantList.filter((item, index) => {
          if (index <= 3) {
            this.$set(item, "image", result.result.show_url + item.images[0]);
          }
        });
      }
    },
    // 点赞
    async getFabulous() {
      let result;
      if (!this.productData.isFabulous) {
        result = await doLikesApi({
          goods_id: this.$route.query.id
        });
        if (iscode(result)) {
          // this.productData.isFabulous = !this.productData.isFabulous;
          this.fabulousInit = false;
          this.getGoodsInfo();
        }
      } else {
        result = await resetLikesApi({
          goods_id: this.$route.query.id
        });
        if (iscode(result)) {
          // this.productData.isFabulous = !this.productData.isFabulous;
          this.fabulousInit = true;
          this.getGoodsInfo();
        }
      }
    },
    // 收藏
    async getCollect() {
      let result;
      if (this.productData.isCollect) {
        result = await resetCollectApi({
          goods_id: this.$route.query.id
        });
        if (iscode(result)) {
          // this.productData.isCollect = !this.productData.isCollect;
          this.collectInit = true;
          this.getGoodsInfo();
        }
      } else {
        result = await doCollectApi({
          goods_id: this.$route.query.id
        });
        if (iscode(result)) {
          // this.productData.isCollect = !this.productData.isCollect;
          this.collectInit = false;
          this.getGoodsInfo();
        }
      }
    },
    //创建一元购订单
    async createOneOrder() {
      let result = await createOneOrderApi({
        goods_id: this.productData.id,
        platform: this.platform
      });
      setTimeout(() => {
        this.canBuy = true;
      }, 1000);
      this.getCode(result);
    },
    // 创建订单
    async createOrder() {
      let result = null
      if(this.is_gold_selected) {
        result = await createOrderApi({
          goods_id: this.productData.id,
          platform: this.platform,
          is_use_gold: 1
        });
      }else {
        result = await createOrderApi({
          goods_id: this.productData.id,
          platform: this.platform
        });
      }

      setTimeout(() => {
        this.canBuy = true;
      }, 1000);
      this.getCode(result);
    },
    //获取订单
    async getCode(result) {
      if (result.code == 0) {
        this.order_sn = result.result;
        let res = await payOrderApi({ order_sn: this.order_sn });
        if (iscode(res)) {
          this.order_id = res.result.order.id;
          this.popProductData = res.result.order
          if (this.platform == 1) {
            this.$router.push({
              path: "/mail/confirmProducts",
              query: {
                id: this.productData.id,
                order_sn: this.order_sn,
                order_id: this.order_id
              }
            });
          } else {
            this.showPopUp = true;
            // 获取代金券列表
            this.getAvailableCoupon();
          }
        }
      } else if (result.code == 200019) {
        if (getWidth() <= 768) {
          Toast(result.message);
          this.$router.push({
            path: "/authentication",
            query: {
              id: this.productData.id
            }
          });
        } else {
          Message({
            message: result.message,
            iconClass: "myErrorIcon",
            customClass: "myError"
          });
          this.$router.push({
            path: "/auth",
            query: {
              id: this.productData.id
            }
          });
        }
      } else if (result.code == 200047 || result.code == 200048) {
        if (getWidth() <= 768) {
          Toast(result.message);
        } else {
          Message({
            message: result.message,
            iconClass: "myErrorIcon",
            customClass: "myError"
          });
        }
      } else {
        if (getWidth() <= 768) {
          Toast(result.message);
          this.$router.push({
            path: "/login",
            query: {
              id: this.productData.id
            }
          });
        } else {
          Message({
            message: result.message,
            iconClass: "myErrorIcon",
            customClass: "myError"
          });
        }
      }
    },
    // 获取代金券信息
    async getAvailableCoupon() {
      let res = await getAvailableCouponApi({
        order_sn: this.order_sn
      });
      if (iscode(res)) {
        this.discountData = res.result.list;
      }
    },

    // ------ common ------
    bindTouchEvents() {
      const element = document.getElementsByClassName("el-table__body-wrapper")[0];
      if (element) {
        element.addEventListener(
          "touchstart",
          e => {
            e.preventDefault();
            this.touchX = e.changedTouches[0].clientX;
            this.touchY = e.changedTouches[0].clientY;
          },
          { passive: false }
        );
        element.addEventListener(
          "touchmove",
          e => {
            e.preventDefault();

            // 计算手指偏移量
            const offsetX = e.changedTouches[0].clientX - this.touchX;
            const offsetY = e.changedTouches[0].clientY - this.touchY;

            element.scrollLeft = element.scrollLeft - offsetX;
            element.scrollTop = element.scrollTop - offsetY;

            this.touchX = e.changedTouches[0].clientX;
            this.touchY = e.changedTouches[0].clientY;
          },
          { passive: false }
        );
        element.addEventListener(
          "touchend",
          e => {
            e.preventDefault();

            this.touchX = e.changedTouches[0].clientX;
            this.touchY = e.changedTouches[0].clientY;
          },
          { passive: false }
        );
      }
    },
    getHelpWidth(helpPercent) {
      let total = this.totalPercent;
      let percent = (helpPercent / total) * 100;
      return `${percent}%`;
    },
    showPcAll() {
      if (this.isShowPcInfo) {
        this.showPcInfo = "收起";
      } else {
        this.showPcInfo = "展开";
      }
      this.isShowPcInfo = !this.isShowPcInfo;
    },
    // 只显示24个字符
    hashcodeSub(hashcode) {
      let res = "";
      if (hashcode) {
        res = hashcode;
        if (hashcode.length > 25) {
          res = hashcode.substring(0, 25) + "...";
        }
      }
      return res;
    },
    hashMouseenter(v) {
      let ele = document.getElementsByClassName(v)[0];
      ele.style.display = "block";
    },
    hashMouseleave(v) {
      let ele = document.getElementsByClassName(v)[0];
      ele.style.display = "none";
    },
    onCopy() {
      if (this.platform == 1) {
        Message({
          message: "复制成功!",
          iconClass: "mySuccessIcon",
          customClass: "mySuccess"
        });
      } else {
        Toast("复制成功!");
      }
    },
    onError() {
      if (this.platform == 1) {
        Message({
          message: "复制失败请重试",
          iconClass: "myErrorIcon",
          customClass: "myError"
        });
      } else {
        Toast("复制失败请重试");
      }
    },
    openDesc() {
      this.isShowPhoneProduct = !this.isShowPhoneProduct;
      if (this.isShowPhoneProduct) {
        this.openDescName = "展开";
      } else {
        this.openDescName = "收起";
      }
    },
    goToDetail(item) {
      window.scrollTo(0, 0);
      this.$router.push({
        path: "/mail/productDetail",
        query: {
          id: item.id
        }
      });
    },
    changeEvent(val) {
      if (val == 1) {
        return "上架";
      } else {
        return "下架";
      }
    },
    tableHeader() {
      if (this.platform == 1) {
        return "background:#2B2C2D;font-weight: 400;color: #959596;font-size:0.06rem;border-color:#333333;";
      } else {
        return "background:#2B2C2D;font-weight: 400;color: #959596; font-size:0.12rem;border-color:#333333;";
      }
    },
    cellStyle() {
      if (this.platform == 1) {
        return "background: #2B2C2D;font-weight: 400; color: #959596;font-size:0.06rem;border-color:#333333;";
      } else {
        return "background: #2B2C2D;font-weight: 400; color: #959596;font-size:0.12rem;border-color:#333333;";
      }
    },
    buyProduct() {
      if (this.status !== 9) {
        this.openCantBuyDialog();
        return;
      }

      if (this.productData.is_gold == 1 && !this.is_gold_selected && this.productData.is_buy == 0) {
        return;
      }

      // 未登录状态下可以连点
      let isLogin = JSON.parse(window.localStorage.getItem("isLogin"));
      if (isLogin) {
        this.canBuy = false;
        if (this.isShowBuyTips) {
          this.createOrder();
        } else {
          this.openBuyNotes();
        }
      } else {
        if (this.platform == 1) {
          Message({
            message: "请先登录",
            iconClass: "myErrorIcon",
            customClass: "myError"
          });
        } else {
          Toast("请先登录");
        }
      }
    },
    buyOne() {
      if (this.status !== 9) {
        this.openCantBuyDialog();
        return;
      }
      if (this.productData.is_buy == 2) {
        return;
      }
      // 未登录状态下可以连点
      let isLogin = JSON.parse(window.localStorage.getItem("isLogin"));
      if (isLogin) {
        this.canBuy = false;
        if (this.productData.is_buy == 1) {
          if (this.isShowBuyTips) {
            this.createOneOrder();
          } else {
            this.openBuyNotes();
          }
        } else {
          setTimeout(() => {
            this.canBuy = true;
          }, 1000);
          this.$router.push({
            path: "/mail/inviteFriend",
            query: {
              goods_id: this.productData.id
            }
          });
        }
      } else {
        if (this.platform == 1) {
          Message({
            message: "请先登录",
            iconClass: "myErrorIcon",
            customClass: "myError"
          });
        } else {
          Toast("请先登录");
          setTimeout(() => {
            this.$router.push("/login");
          }, 500);
        }
      }
    },
    changeGoldSelect() {
      this.is_gold_selected = !this.is_gold_selected
    },

    // ------ count time ------
    // 是否超时
    overTime(result) {
      let startDate, endDate;
      if (isIOS()) {
        startDate = new Date(result.result.now_time.replace(/-/g, "/"));
        endDate = new Date(result.result.goods_info.pre_end_time.replace(/-/g, "/"));
      } else {
        startDate = new Date(result.result.now_time);
        endDate = new Date(result.result.goods_info.pre_end_time);
      }
      let now = startDate.getTime();
      let end = endDate.getTime();
      if (end - now > 0) {
        this.$set(this.productData, "isOverTime", false);
      } else {
        this.$set(this.productData, "isOverTime", true);
        if (result.result.is_one_buy !== 1) {
          this.status = -1;
        }
      }
    },
    //倒计时
    countTime(result, item) {
      if (window.setIntervalID) {
        clearInterval(window.setIntervalID);
      }
      if (item.is_buy == 0 && result.result.is_one_buy !== 1) {
        let startDate, endDate;
        if (isIOS()) {
          startDate = new Date(result.result.now_time.replace(/-/g, "/"));
          endDate = new Date(item.pre_start_time.replace(/-/g, "/"));
        } else {
          startDate = new Date(result.result.now_time);
          endDate = new Date(item.pre_start_time);
        }
        let now = startDate.getTime();
        let end = endDate.getTime();
        let leftTime = end - now;
        if (leftTime > 0 && result.result.is_one_buy !== 1) {
          this.status = 1;
        }
        window.setIntervalID = setInterval(() => {
          if (leftTime > 0) {
            leftTime = leftTime - 1000;
          } else if (leftTime === 0) {
            this.status = 9;
            clearInterval(window.setIntervalID);
            this.getGoodsInfo();
          } else {
            clearInterval(setIntervalID);
          }
        }, 1000);
      }
    },

    // ------ discount ------
    // 代金券切换：返回切换代金券后的索引下标
    handlePickDiscountCard(currentPickIndex) {
      this.currentPickIndex = currentPickIndex;
    },
    // 代金券折后价
    disPrice(price) {
      let discount = this.discountData[this.currentPickIndex]?.amount ?? 0;
      return parseFloat((price - discount).toFixed(2));
    },
    // 关闭cantBuyDialog
    closeCantBuyDialog() {
      this.isShowCantBuyDialog = false;
    },
    // 打开cantBuyDialog
    openCantBuyDialog() {
      this.isShowCantBuyDialog = true;
    },

    // ------ goto ------
    gotoDiscount() {
      this.$router.push("/discount");
    },

    //打开购买须知弹窗
    openBuyNotes() {
      this.canBuy = true;
      this.buyNotesShow = true;
    },
    //关闭购买须知弹窗
    closeBuyNotes() {
      this.buyNotesShow = false;
    },
    //继续购买
    continueBuy() {
      this.closeBuyNotes();
      if (this.is_one_buy == 1) {
        this.createOneOrder();
      } else {
        this.createOrder();
      }
    }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let that = this;
    this.getGoodsInfo();
    this.paySuccessCode();
    if (this.$route.query.toPay) {
      this.order_sn = this.$route.query.order_sn;
      this.showPopUp = true;
    }
    this.getSimilarGoodsList();
    this.bindTouchEvents();
    if (getWidth() <= 768) {
      that.platform = 2;
      that.hashWidth = 200;
      that.timeWidth = 140;
      that.copySize = "0.12rem";
    } else {
      that.platform = 1;
      that.hashWidth = 250;
      that.copySize = "0.06rem";
    }
    window.onresize = function() {
      if (that.$refs.productDetail) {
        if (getWidth() <= 1250 && getWidth() > 768) {
          that.hashWidth = "";
          that.timeWidth = "";
        } else if (getWidth() <= 768) {
          that.hashWidth = 200;
          that.timeWidth = 140;
          that.copySize = "0.12rem";
        } else if (getWidth() > 1250) {
          that.hashWidth = 250;
        }
      }
    };
  }
};
</script>

<style lang="less" scoped>
.productDetail {
  width: 100%;
  padding-bottom: 40px;

  p {
    margin-bottom: 0;
  }

  .detailContent {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 20px;

    .leftPath {
      // width: 900px;
      margin-right: 40px;

      .leftTop {
        // user-select: none;
        display: flex;
        align-items: flex-start;

        .pcProductImg {
          position: relative;
          height: 420px;
          display: flex;
          align-items: center;

          .productImg {
            width: 420px;
            max-height: 420px;
            height: auto;
            margin-right: 40px;
          }

          .imgDesc {
            position: absolute;
            bottom: 10px;
            left: 10px;
            width: 400px;
            height: 90px;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(30px);
            padding: 15px;
            display: flex;
            align-items: center;

            .samllPcImg {
              width: 60px;
              height: 60px;
            }

            p {
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              line-height: 20px;
              margin-left: 15px;
            }
          }
        }

        .phoneProductBg {
          display: none;
        }

        .imageRight {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 420px;

          .pcTitle {
            font-size: 28px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #ffffff;
            line-height: 32px;
            margin: 0;
            min-height: 60px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            width: 424px;
          }

          .user {
            user-select: none;
            display: flex;
            align-items: center;
            margin-top: 20px;
            margin-bottom: 30px;

            .fabulous,
            .collection {
              display: flex;
              align-items: center;
              justify-content: space-between;

              img {
                cursor: pointer;
                margin-right: 8px;
                width: 18px;
                height: 18px;
              }

              .userDesc {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #00ffb0;

                span {
                  margin-left: 10px;
                  opacity: 0.6;
                }

                .isCollectText {
                  opacity: 1;
                }
              }
            }

            .splitLine {
              width: 1px;
              height: 14px;
              opacity: 0.3;
              border: 1px solid #ffffff;
              margin: 0 30px;
            }
          }

          .beginTime {
            background: url("../../../../assets/images/product/sellDayBg.png");
            background-size: 100% 100%;
            width: 172px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #000000;
          }

          .box {
            width: 494px;
            height: 190px;
            background: #2b2c2d;
            overflow: hidden;
            position: relative;
            padding: 30px 0 31px 20px;

            .boxBg {
              width: 329px;
              height: 190px;
              position: absolute;
              top: 0;
              right: 0;
            }

            .priceTitle {
              font-size: 16px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              position: relative;
              z-index: 2;
            }

            .price {
              position: relative;
              margin-top: 15px;
              font-size: 22px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #00ffb0;
              z-index: 2;

              span {
                font-size: 16px;
                margin-right: 3px;
              }
            }

            .oldPrice {
              display: inline-flex;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: red;

              .delContent {
                font-size: 12px !important;
                color: #00ffb0 !important;
              }
            }

            .boxBottom {
              display: flex;
              align-items: center;
              position: relative;
              margin-top: 30px;

              .buyButton {
                margin: 0;
                position: relative;
                z-index: 2;
                width: 215px;
                height: 39px;
                background-color: transparent !important;
                background-image: url("../../../../assets/images/product/buyBg.png");
                background-size: 100% 100%;
                box-shadow: unset;
                color: #1e2020 !important;
                border-radius: unset;

                .md-ripple {
                  border: none;

                  .md-button-content {
                    font-size: 14px;
                    font-family: PingFangSC-Semibold, PingFang SC;

                    span {
                      font-weight: 600;
                    }
                  }
                }
              }

              .unBuy {
                background-image: url("../../../../assets/images/product/unbuyBg.png");
              }

              p {
                margin-left: 17px;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #aaaaaa;
                line-height: 12px;

                span {
                  color: #00ffb0;
                }
              }
            }

            .isGoldSelected {
              position: absolute;
              left: 50%;
              top: 66px;
              user-select: none;
              z-index: 9;

              label {
                display: flex;
                align-items: center;
                font-size: 14px;
                cursor: pointer;

                span {
                  font-size: 14px;
                  color: #0ec38a;
                  margin: 0;
                  margin-left: 5px;
                  line-height: 1;
                }
              }
              
              img {
                display: block;
                width: 15px;
              }
            }
          }

          .authentication {
            margin-top: 19px;
            background: url("../../../../assets/images/product/authenticationBg.png");
            background-size: 100% 100%;
            width: 494px;
            height: 54px;
            display: flex;
            align-items: center;
            justify-content: center;

            .spiltLine {
              width: 1px;
              height: 12px;
              border: 1px solid #ffffff;
              opacity: 0.3;
              margin: 0 30px;
            }

            .onLine,
            .appraisal {
              user-select: none;
              display: flex;
              align-items: center;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #00ffb0;

              img {
                width: 12px;
                height: 12px;
                margin-right: 5px;
              }
            }
          }
        }

        .phoneDesc {
          display: none;
        }
      }

      .pcHelp {
        user-select: none;
        margin-top: 40px;
        width: 954px;
        height: 130px;
        background: #2b2c2d;
        backdrop-filter: blur(3px);
        position: relative;
        padding: 30px 0 40px 30px;

        .pcHelpLeft {
          position: absolute;
          top: 0;
          left: 0;
          width: 502px;
          height: 130px;
        }

        .pcHelpFinish {
          position: absolute;
          top: 0;
          right: 0;
          width: 100px;
          height: 90px;
        }

        .pcHelpTop {
          display: flex;
          align-items: center;

          .pcHelpTitle {
            width: 150px;
            height: 30px;
            margin-right: 20px;
          }

          p {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 14px;
          }
        }

        .pcHelpBottom {
          display: flex;
          align-items: center;
          margin-top: 22px;

          .pcHelpProcess {
            width: 500px;
            height: 8px;
            background: #1e2020;
            border-radius: 4px;
            margin-right: 61px;

            .pcHelpCurrent {
              height: 8px;
              background: #00ffb0;
              border-radius: 4px;
            }
          }

          .finishMargin {
            margin-right: 12px;
          }

          p {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;

            span {
              color: #00ffb0;
            }
          }
        }
      }

      .leftCenter {
        margin-top: 20px;
        width: 954px;
        min-height: 211px;
        background: #2b2c2d;
        padding: 30px;

        .centerTitle {
          font-size: 22px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffffff;
          line-height: 22px;
        }

        .defaultInfo {
          margin-top: 20px;
          display: flex;
          align-items: center;

          .defaultIcon {
            width: 28px;
            height: 28px;
            margin-right: 10px;
          }

          .defaultName {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
          }
        }

        .centerBox {
          margin-top: 20px;
          min-height: 66px;
          background: #2b2c2d;

          .goodsDesc {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #888888;
            line-height: 22px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
          }

          .isShowAll {
            display: block;
            -webkit-line-clamp: unset !important;
          }

          .showPcInfo {
            text-align: right;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            cursor: pointer;
          }
        }
      }

      .chainRecord {
        margin-top: 20px;
        width: 954px;
        // min-height: 304px;
        background: #2b2c2d;
        padding: 30px;

        .chainTitle {
          font-size: 22px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffffff;
        }

        .chainTitleImg {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 120px;

          img {
            width: 70px;
            margin: 0 90px;
          }
        }

        .chainBox {
          margin-top: 20px;
          background: #2b2c2d;

          // border-bottom-width: 0;
          .copyName {
            color: #00ffb0;
          }
        }

        /deep/ .el-table__empty-block {
          background-color: #2b2c2d;
          border-bottom: 1px solid #333333;
        }

        /deep/ .el-table::before {
          height: 0;
          background-color: #333333;
        }
      }

      .instructions {
        margin-top: 20px;
        width: 954px;
        // height: 150px;
        background: #2b2c2d;
        padding: 30px;

        .instructionsTitle {
          font-size: 22px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffffff;
        }

        .instructionsBox {
          margin-top: 20px;

          p {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #959596;
            line-height: 22px;
          }
        }
      }
    }

    .rightPath {
      .relevantTitle {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .splitLine {
          width: 35px;
          height: 1px;
          border: 1px solid #333333;
        }

        p {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
        }
      }

      .relevantBox {
        margin-top: 20px;
        width: 166px;

        .relevantItem {
          background: #2b2c2d;
          box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
          margin-bottom: 15px;

          img {
            width: 100%;
            height: 166px;
            cursor: pointer;
          }

          .relevantDesc {
            padding: 8px 10px 14px 8px;

            .relevantTitle {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #ffffff;
              line-height: 18px;
              min-height: 14px;
            }

            .buy {
              margin-top: 12px;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .price {
                font-size: 14px;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #00ffb0;

                span {
                  font-size: 12px;
                  margin: 3px;
                }
              }

              .phoneProductNumber {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
              }
            }
          }
        }

        .relevantItem:first-child {
          border-bottom: none;
        }

        .phoneItem {
          display: none;
        }
      }
    }
  }

  .phoneBottom {
    display: none;
  }

  /deep/.el-table {
    background: #2b2c2d;
  }

  /deep/.el-table__body-wrapper {
    overflow: auto;
    min-height: 130px;
    max-height: 330px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    display: none;
  }

  // 表单每行
  /deep/.cell {
    text-align: center;
  }

  .hashCodeToolTip {
    transition: all 0.3s ease;
    // border: 1px solid rgb(231, 231, 231);
    padding: 5px;
    background: rgb(51, 51, 51);
    color: white;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -70px);
    display: none;
    white-space: pre-wrap;
    z-index: 99999;
    width: 250px;
    // pointer-events: none;
  }

  /deep/.el-table__row:first-child {
    .hashCodeToolTip {
      top: 200%;
    }
  }

  .hashCodeToolTip::after {
    content: "";
    width: 0;
    height: 0;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 5px solid rgb(51, 51, 51);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
  }

  /deep/.el-table__row:first-child {
    .hashCodeToolTip::after {
      top: 0;
      transform: translate(-50%, -100%) rotate(180deg);
    }
  }

  .hashCode {
    display: block;
    margin: 0 auto;
    // width: 180px;
    text-align: center;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
  }
}

@media screen and (max-width: 768px) {
  .productDetail {
    background: #1e2020;
    padding-bottom: 0;

    .detailContent {
      display: block;
      margin-bottom: 102px;
      margin-top: 0;

      .leftPath {
        width: 100%;
        margin-right: 0;

        .leftTop {
          display: block;

          .pcProductImg {
            display: none;
          }

          .phoneProductBg {
            display: block;
            width: 100%;
            min-height: 750px;
            position: relative;
            display: flex;
            align-items: center;

            .phoneProductImg {
              width: 100%;
              max-height: 750px;
              // min-height: 750px;
            }

            .phoneProductBg {
              width: 100%;
              max-height: 750px;
              height: auto;
              position: absolute;
              bottom: 0;
              left: 0;
            }

            .phoneOptionPop {
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              top: -1000px;
              width: 100%;
              opacity: 0;

              .phonePopContnet {
                width: 200px;
                height: 108px;
                background: #2c2c2e;
                border-radius: 54px;
                font-size: 26px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #ffffff;
                line-height: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
              }
            }

            .phoneOptions {
              padding: 0 30px;
              position: absolute;
              top: 34px;
              left: 0;
              z-index: 5;
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;

              .phoneback {
                width: 80px;
                height: 80px;
                background: rgba(255, 255, 255, 0.3);
                backdrop-filter: blur(3px);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                  width: 40px;
                  height: 40px;
                }
              }

              .phoneBadge {
                .phoneFabulous,
                .phoneCollection {
                  width: 80px;
                  height: 80px;
                  background: rgba(255, 255, 255, 0.3);
                  backdrop-filter: blur(3px);
                  border-radius: 50%;
                  position: relative;
                  display: flex;
                  align-items: center;
                  justify-content: center;

                  img {
                    width: 40px;
                    height: 40px;
                  }
                }

                .phoneCollection {
                  margin-left: 30px;
                }
              }

              /deep/.van-badge {
                background: #f24038;
                font-size: 24px;
                // border-radius: 50%;
                min-width: 32px;
                min-height: 32px;
                border: none;
                line-height: unset;
                top: 15px !important;
                right: 10px;
              }
            }

            .slideTop {
              top: 116px;
              -webkit-animation: slide-out-top 2s both;
              animation: slide-out-top 2s both;
            }

            @-webkit-keyframes slide-out-top {
              0% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
                opacity: 1;
              }

              // 50% {
              //   -webkit-transform: translateY(-100px);
              //   transform: translateY(-100px);
              //   opacity: 0.8;
              // }
              100% {
                -webkit-transform: translateY(-300px);
                transform: translateY(-300px);
                opacity: 0;
              }
            }

            @keyframes slide-out-top {
              0% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
                opacity: 1;
              }

              // 50% {
              //   -webkit-transform: translateY(-100px);
              //   transform: translateY(-100px);
              //   opacity: 0.8;
              // }
              100% {
                -webkit-transform: translateY(-300px);
                transform: translateY(-300px);
                opacity: 0;
              }
            }
          }

          .imageRight {
            display: none;
          }

          .phoneDesc {
            display: block;
            padding: 0 30px;
            margin-top: -92px;
            position: relative;

            .phoneImageDesc {
              width: 100%;
              height: 140px;
              background: #2b2c2d;
              border-radius: 12px;
              backdrop-filter: blur(10px);
              margin-bottom: 20px;
              padding: 30px;
              display: flex;
              align-items: center;

              .phoneImageDescIcon {
                width: 80px;
                height: 80px;
                margin-right: 20px;
              }

              .phoneImageInfo {
                .phoneImageInfoTitle {
                  font-size: 24px;
                  font-family: PingFangSC-Medium, PingFang SC;
                  font-weight: 500;
                  color: #ffffff;
                }

                .phoneImageInfoName {
                  font-size: 24px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #ffffff;
                }
              }
            }

            .sellDay {
              background: url("../../../../assets/images/mobile/sellBtnBg.png");
              background-size: 100% 100%;
              width: 320px;
              height: 56px;
              font-size: 32px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #000000;
              display: flex;
              align-items: center;
              justify-content: center;
              // padding: 12px 0 12px 20px;
            }

            .phoneProductInfo {
              width: 100%;
              background: #2b2c2d;
              border-radius: 0 12px 12px 12px;
              padding: 40px 30px;
              position: relative;

              .phoneProductInfoBg {
                width: 390px;
                height: 302px;
                position: absolute;
                top: 3px;
                right: 3px;
              }

              .phoneProductTitle {
                position: relative;
                z-index: 2;
                font-size: 40px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #ffffff;
                margin-bottom: 30px;
                line-height: 52px;
              }

              .defaultPath {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 30px;
                position: relative;
                z-index: 2;

                .defaultContent {
                  display: flex;
                  align-items: center;

                  .defaultHeadIcon {
                    width: 46px;
                    height: 46px;
                  }

                  .defaultName {
                    margin-left: 20px;
                    font-size: 24px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #ffffff;
                  }
                }

                .productStock {
                  font-size: 24px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #aaaaaa;

                  span {
                    color: #00ffb0;
                  }
                }
              }

              .phoneLinks {
                margin-top: 36px;
                display: flex;
                align-items: center;

                .onLine {
                  margin-right: 50px;
                }

                .onLine,
                .appraisal {
                  user-select: none;
                  display: flex;
                  align-items: center;

                  p {
                    font-size: 24px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #00ffb0;
                  }

                  img {
                    width: 24px;
                    height: 24px;
                    margin-right: 10px;
                  }
                }

                .fabulous,
                .collection {
                  display: flex;
                  align-items: baseline;
                  justify-content: space-between;

                  p {
                    font-size: 30px;
                    font-weight: 400;
                    color: #666666;
                  }

                  img {
                    margin-right: 10px;
                    width: 27px;
                    height: 27px;
                  }
                }

                .collection {
                  img {
                    width: 25px;
                    height: 25px;
                  }
                }
              }
            }

            .phoneHelp {
              margin-top: 20px;
              background: url("~@/assets/images/product/phoneHelpBg.png");
              background-size: 100% 100%;
              width: 100%;
              height: 160px;
              position: relative;
              padding: 30px;

              .phoneHelpFinish {
                position: absolute;
                top: 0;
                right: 0;
                width: 98px;
                height: 84px;
              }

              .phoneHelpTop {
                display: flex;
                align-items: center;

                .phoneHelpTitle {
                  width: 180px;
                  height: 36px;
                  margin-right: 16px;
                }

                p {
                  font-size: 24px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #ffffff;
                }
              }

              .phoneHelpBottom {
                margin: 20px 0 0 0px;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .phoneHelpProcess {
                  width: 490px;
                  height: 16px;
                  background: #1e2020;
                  border-radius: 8px;
                  margin-right: 66px;

                  .phoneHelpCurrent {
                    height: 16px;
                    background: #00ffb0;
                    border-radius: 8px;
                  }
                }

                .finishMargin {
                  margin-right: 30px;
                }

                p {
                  font-size: 24px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #ffffff;

                  span {
                    color: #00ffb0;
                  }
                }
              }
            }

            .phoneProductDesc {
              margin-top: 20px;
              width: 100%;
              min-height: 282px;
              background: #2b2c2d;
              border-radius: 12px;
              backdrop-filter: blur(3px);
              padding: 40px 30px 70px 30px;

              .phoneProductDescTitle {
                font-size: 40px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #ffffff;
              }

              .phoneProductDescContent {
                margin-top: 30px;
                font-size: 28px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #959596;
                line-height: 44px;
                position: relative;

                .goodsDescPhone {
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 3;
                  overflow: hidden;
                }

                .isShowAll {
                  display: block;
                  -webkit-line-clamp: unset !important;
                }

                .openDesc {
                  color: #ffffff;
                  line-height: 44px;
                  font-size: 28px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  position: absolute;
                  bottom: -40px;
                  right: 10px;
                }
              }
            }
          }
        }

        .pcHelp {
          display: none;
        }

        .leftCenter {
          display: none;
        }

        .chainRecord {
          margin: 20px 30px;
          background: #2b2c2d;
          border-radius: 12px;
          backdrop-filter: blur(3px);
          width: auto;
          padding: 0;

          .chainTitle {
            font-size: 32px;
            padding: 40px 0 34px 40px;
            color: #ffffff;
            font-size: 40px;
            margin: 0;
          }

          .chainTitleImg {
            height: 200px;

            img {
              margin: 0 65px;
            }
          }

          .chainBox {
            background: #2b2c2d;
            border: none;
            border-radius: 0 0 12px 12px;
            padding-bottom: 40px;

            .copyName {
              color: #00ffb0;
            }
          }

          /deep/ .el-table__empty-text {
            font-size: 0.1rem !important;
            color: #959596;
          }

          /deep/ .el-table__body-wrapper,
          .productDetail .el-table {
            overflow-x: auto !important;
          }

          /deep/ .el-table::before {
            background-color: #333333;
          }

          /deep/ .el-table,
          .el-table__expanded-cell {
            background-color: #2b2c2d;
          }

          /deep/.el-table__body-wrapper {
            overflow: auto;
            max-height: 380px !important;
            min-height: unset !important;
          }
        }

        .instructions {
          background-color: #2b2c2d;
          border-radius: 12px;
          backdrop-filter: blur(3px);
          margin: 0 30px 52px 30px;
          width: auto;
          height: auto;
          padding: 0;

          .instructionsTitle {
            padding: 40px 0 30px 40px;
            margin: 0;
            font-weight: 600;
            color: #ffffff;
            font-size: 40px;
          }

          .instructionsBox {
            background: #2b2c2d;
            box-shadow: none;
            border-radius: 0px;
            padding: 0px 40px 40px 40px;
            margin-bottom: 53px;
            margin-top: 0;
            border: none;
            border-radius: 0 0 12px 12px;

            p {
              font-size: 28px;
              color: #959596;
              line-height: 44px;
            }
          }
        }
      }

      .rightPath {
        margin-top: 52px;
        width: 100%;
        padding: 0 30px;
        padding-bottom: 138px;

        .relevantTitle {
          .splitLine {
            display: none;
          }

          p {
            font-weight: 600;
            color: #ffffff;
            font-size: 40px;
          }
        }

        .relevantBox {
          margin-top: 32px;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          background-color: #1e2020;
          flex-wrap: wrap;

          .relevantItem {
            display: none;
          }

          .phoneItem {
            display: block;
            background: #2b2c2d;
            box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);
            border-radius: 12px;
            padding: 0;
            width: calc(50% - 10px);
            margin-bottom: 26px;

            .productImages {
              img {
                width: 100%;
                height: 332px;
                border-radius: 12px 12px 0 0;
              }
            }

            .productDesc {
              padding: 16px 20px 28px 20px;

              p {
                padding-top: 0;
              }

              .productTitle {
                font-size: 28px;
                margin-bottom: 24px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                min-height: 80px;
                color: #ffffff;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
              }

              .productNumber {
                display: none;
              }

              .productLimit {
                display: none;
              }

              .buy {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .price {
                  font-size: 24px;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #00ffb0;
                }

                span {
                  font-size: 18px;
                  margin-right: 5px;
                }

                .buyButton {
                  display: none;
                }

                .phoneProductNumber {
                  display: block;
                  font-size: 20px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #8e8f8f;
                }
              }
            }
          }
        }
      }
    }

    .phoneBottom {
      display: block;
      width: 100%;
      background: rgba(0, 0, 0, 0.8);
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 99;

      .bottomContent {
        position: relative;
        padding: 26px 30px 46px 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .price {
          font-size: 50px;
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: #00ffb0;
          display: flex;
          align-items: baseline;
        }

        span {
          font-size: 32px;
          margin-right: 5px;
        }

        .m_oldPrice {
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: red;
          align-items: baseline;

          .delContent {
            font-size: 24px !important;
            color: #00ffb0 !important;
          }
        }

        .buyButton {
          margin: 0;
          width: 430px;
          height: 72px;
          color: #1e2020 !important;
          background-color: transparent !important;
          background-image: url("../../../../assets/images/mobile/buyBtnBg.png");
          background-size: 100% 100%;
          font-size: 28px;
          font-weight: 600;
          box-shadow: none;

          span {
            font-size: 28px;
          }
        }

        .selloutButton {
          background-image: url("../../../../assets/images/mobile/selloutBtnBg.png");
        }

        .isGoldSelected {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          position: absolute;
          left: 0;
          top: -60px;
          width: 100%;
          height: 60px;
          padding: 0 30px;
          background: rgba(0, 0, 0, 0.8);
          // -webkit-backdrop-filter: blur(20px);
          // backdrop-filter: blur(20px);
          z-index: 99999;

          img {
            display: block;
            width: 26px;
            height: 26px;
          }

          span {
            font-size: 26px;
            font-weight: 500;
            color: #0ec38a;
            margin: 0;
            margin-left: 5px;
            line-height: 1;
          }


        }
      }
    }

    .phonePop {
      background: #1e2020;

      .phoneContent {
        position: relative;
        z-index: 10;
        padding: 40px 30px;

        .closeIcon {
          position: absolute;
          top: 40px;
          right: 40px;
          z-index: 5;
          width: 40px;
          height: 40px;
        }

        .phoneContentInfo {
          .phoneTitle {
            font-size: 40px;
            font-weight: 600;
            color: #ffffff;
            line-height: 40px;
            margin-bottom: 40px;

            span {
              color: #999999;
              font-size: 24px;
              font-weight: 400;
              margin-bottom: 20px;
              margin-left: 20px;
            }
          }

          .phoneProductInfo {
            display: flex;
            padding-bottom: 40px;
            // border-bottom: 1px solid #333;

            .smallImage {
              width: 180px;
              height: 180px;
              margin-right: 30px;
            }

            .phoneInfoRigth {
              max-width: 480px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;

              .phoneProductName {
                font-size: 28px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #ffffff;
                line-height: 36px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                margin-bottom: 20px;
              }

              .phoneOrderId {
                color: #999999;
                font-size: 24px;
                font-weight: 400;
                margin-bottom: 20px;
              }

              .phonePrice {
                font-size: 30px;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #00ffb0;

                span {
                  font-size: 24px;
                  margin-right: 5px;
                }
              }
            }
          }
        }

        .discount-title {
          display: flex;
          justify-content: space-between;
          // align-items: center;
          margin-top: 40px;
          margin-bottom: 20px;

          span:nth-child(1) {
            font-size: 30px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #ffffff;
            word-break: keep-all;
          }

          span:nth-child(2) {
            font-size: 20px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #999999;
            // word-break: keep-all;
          }
        }

        .discount {
          width: 100%;
          max-height: 330px;
          overflow: auto;

          .discount-none {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100px;
            // background-color: #1e2020;
            background-color: #1b1c1c;
            box-shadow: 0 4px 8px 0 rgb(18, 18, 18);
            font-size: 28px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 600;
            color: #999999;
          }
        }

        .phonePay {
          margin-top: 40px;

          .phonePayTitle {
            font-size: 28px;
            font-weight: 400;
            color: #ffffff;
            font-family: PingFangSC-Regular, PingFang SC;
            margin-bottom: 32px;
          }

          .phonePayMode {
            padding: 44px 30px;
            background: #2b2c2d;
            border-radius: 12px;
            margin-top: 30px;

            .phoneWxPay,
            .phoneLianPay,
            .phoneAliPay {
              display: flex;
              align-items: center;
              justify-content: space-between;

              .phonePayIcon {
                width: 41px;
                height: 41px;
                margin-right: 16px;
              }

              .phonePayType {
                margin-right: auto;
                font-size: 32px;
                font-weight: 600;
                color: #ffffff;
                font-family: PingFangSC-Semibold, PingFang SC;
              }

              .selectIcon {
                width: 40px;
                height: 40px;
              }
            }

            .phoneAliPay {
              .phonePayIcon {
                height: auto;
              }
            }

            .phoneLianPay {
              margin-top: 80px;

              .lianlianPayIcon {
                height: 41px;
                margin-right: 16px;
              }
            }
          }

          .phonePayMode:first-child {
            margin-top: 0;
          }
        }
      }

      .phonePayBottom {
        display: block;
        width: 100%;
        background: rgba(0, 0, 0, 0.8);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        margin-top: 60px;

        .bottomContent {
          padding: 26px 30px 66px 30px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .price {
            font-size: 50px;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #00ffb0;
            display: flex;
            align-items: baseline;
          }

          span {
            font-size: 32px;
            margin-right: 5px;
          }

          .buyButton {
            margin: 0;
            width: 430px;
            height: 72px;
            color: #1e2020 !important;
            background-color: transparent !important;
            background-image: url("../../../../assets/images/mobile/buyBtnBg.png");
            background-size: 100% 100%;
            font-size: 28px;
            font-weight: 600;
            box-shadow: none;

            span {
              font-size: 28px;
            }
          }

          .selloutButton {
            background-image: url("../../../../assets/images/mobile/selloutBtnBg.png");
          }
        }
      }
    }

    .phoneInvite {
      // height: 77%;
      height: 1254px;
      background-color: #1e2020 !important;
      background: url("~@/assets/images/product/phoneInviteBg.png");
      background-size: 100% 100%;
      border-radius: 24px 24px 0px 0px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .closeIcon {
        position: absolute;
        top: 40px;
        right: 40px;
        z-index: 5;
        width: 40px;
        height: 40px;
      }

      .inviteTitle {
        margin-top: 172px;
        font-size: 44px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
      }

      .defaultHeadIcon {
        margin-top: 40px;
        width: 88px;
        height: 88px;
      }

      .inviteDefaultName {
        margin-top: 20px;
        font-size: 32px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }

      .inviteDesc {
        margin-top: 40px;
        font-size: 32px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }

      .inviteInfo {
        width: 100%;
        margin-top: 85px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 40px 70px;

        .inviteInfoLeft {
          .inviteInfoTitle {
            font-size: 36px;
            font-family: FZLTTHJW--GB1-0, FZLTTHJW--GB1;
            font-weight: bold;
            color: #ffffff;
          }

          .inviteInfoDesc {
            width: 340px;
            margin-top: 20px;
            font-size: 28px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #bbbbbb;
            line-height: 40px;
          }
        }

        .InviteCode {
          width: 200px;
          height: 200px;
        }
      }

      .inviteLink {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0 40px;
        margin-top: 60px;

        .inviteLinkItem {
          display: flex;
          flex-direction: column;
          align-items: center;

          .inviteLinkImage {
            width: 110px;
            height: 110px;
            background: #1d1d1d;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              width: 66px;
              height: 66px;
            }
          }

          p {
            margin-top: 22px;
            font-size: 24px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.87);
          }
        }
      }

      .inviteCancel {
        width: 100%;
        padding: 0 30px;
        margin-top: 60px;

        .inviteCancelBtn {
          width: 100%;
          height: 88px;
          background: #444444;
          border-radius: 6px;
          font-size: 32px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>
